<template>
  <div class="cs-page-container" style="width:100%;">
    <div class="cs-filter-container">
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
      >
        查询
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
      <el-button
        type="warning"
        @click="exportExcel('#ActiveList-out-table', '活跃用户')"
      >导出</el-button>
    </div>
    <LineChart :options="chartOptions" style="width:1400%;height:300px" />
  </div>
</template>

<script>
  import LineChart from '@/components/LineChart'
  import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
  import { xhrRealTimeActivation } from '@api/analysis'
  import { parseTime } from '@/utils'

  export default {
    name: 'CardPropList',
    components: { LineChart },
    data() {
      return {
        listQuery: {
          startTime: null,
          endTime: null
        },
        daterangeValue: '',
        daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
        inventoryData: [],
        inventoryDate: [],
        chartOptions: {}
      }
    },
    created() {
      this.doSearch()
    },
    methods: {
      doSearch() {
        xhrRealTimeActivation(this.listQuery).then(resp => {
          this.listLoading = false
          this.inventoryList = resp.data.list
          this.seriesitem = {
          }
          var data_items = {}
          this.inventoryList.forEach(item => {
            data_items[parseTime(item.recordTime / 1000, '{y}-{m}-{d} {h}')] = item.recordCount
          })
          this.hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
          console.log(this.listQuery.endTime)
          var day = this.listQuery.endTime ? new Date(this.listQuery.endTime).getTime() : new Date().getTime();
          var end_day = this.listQuery.startTime ? new Date(this.listQuery.startTime).getTime() : day - (24 * 60 * 60 * 1000 * 2); // 默认为三天
          // eslint-disable-next-line no-constant-condition
          while (1) {
            const day_name = parseTime(day, '{y}-{m}-{d} ')
            this.seriesitem[day_name] = []
            this.hours.forEach(item => {
              const key = parseTime(day, '{y}-{m}-{d} ') + item
              this.seriesitem[day_name].push(data_items[key] > 0 ? data_items[key] : 0)
            })
            if (day > end_day) {
              day = day - (24 * 60 * 60 * 1000)
            } else {
              break
            }
          }
          console.log(this.seriesitem)
          this.mySeries = []
          this.legendDatas = []
          for (const index in this.seriesitem) {
            if (Math.max.apply(null, this.seriesitem[index]) > 0) {
              this.mySeries.push(
                {
                  name: index,
                  type: 'line',
                  data: this.seriesitem[index]
                }
              )
              this.legendDatas.push(index)
            }
          }
          // var day1 = this.listQuery.endTime ? this.listQuery.endTime : new Date().getTime();
          // var day2 = this.listQuery.endTime ? this.listQuery.endTime - (24 * 60 * 60 * 1000) : new Date().getTime() - (24 * 60 * 60 * 1000);
          // var day3 = this.listQuery.endTime ? this.listQuery.endTime - (24 * 60 * 60 * 1000 * 2) : new Date().getTime() - (24 * 60 * 60 * 1000 * 2);
          // this.hours.forEach(item => {
          //   const key1 = parseTime(day1, '{y}-{m}-{d} ') + item
          //   const key2 = parseTime(day2, '{y}-{m}-{d} ') + item
          //   const key3 = parseTime(day3, '{y}-{m}-{d} ') + item
          //   this.seriesitem['day1'].push(data_items[key1] > 0 ? data_items[key1] : 0)
          //   this.seriesitem['day2'].push(data_items[key2] > 0 ? data_items[key2] : 0)
          //   this.seriesitem['day3'].push(data_items[key3] > 0 ? data_items[key3] : 0)
          // })
          // this.mySeries = []
          // this.legendDatas = []
          // if (Math.max.apply(null, this.seriesitem.day1) > 0) {
          //   this.mySeries.push(
          //     {
          //       name: parseTime(day1, '{y}-{m}-{d}'),
          //       type: 'line',
          //       data: this.seriesitem.day1
          //     }
          //   )
          //   this.legendDatas.push(parseTime(day1, '{y}-{m}-{d}'))
          // }
          // if (Math.max.apply(null, this.seriesitem.day2) > 0) {
          //   this.mySeries.push(
          //     {
          //       name: parseTime(day2, '{y}-{m}-{d}'),
          //       type: 'line',
          //       data: this.seriesitem.day2
          //     }
          //   )
          //   this.legendDatas.push(parseTime(day2, '{y}-{m}-{d}'))
          // }
          // if (Math.max.apply(null, this.seriesitem.day3) > 0) {
          //   this.mySeries.push(
          //     {
          //       name: parseTime(day3, '{y}-{m}-{d}'),
          //       type: 'line',
          //       data: this.seriesitem.day3
          //     }
          //   )
          //   this.legendDatas.push(parseTime(day3, '{y}-{m}-{d}'))
          // }
          // console.log(this.mySeries)
          this.drawLine()
        })
      },
      drawLine() {
        this.chartOptions = {
          title: {
            text: '实时激活'
          },
          legend: {
            data: this.legendDatas
          },
          xAxisData: this.hours,
          series: this.mySeries
        }
      }
    }
  }
</script>
